import React, { Component } from 'react'
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import SearchInput from "../searchInput/searchInput"
import "./goodList.scss"
import myaxios from "../../utils/myaxios"
import emptyProduct from "../../imgs/empty_product.jpg"
export default class goodList extends Component {
  constructor(props){
    super(props)
    //列表的应用
    this.goodListRef = React.createRef();
    this.pagenum=1; //默认页数为1
    this.pageSize = 20 ;//默认返回的每条请求的数量
    console.log(this.goodListRef);
  }
  state = {
    tabs: [
      { title: "综合" },
      { title: "销量" },
      { title: "价格" },
    ],
    goods: []
  }
  componentDidMount() {
    // console.log(this.props);
    // console.log(this.props.location.search);/* ?cid=5  第一种方式*/
    /* 第二种方式 可以直接结构 */
    let { search } = this.props.location
    // console.log(search);  //?cid=5
    let params = search.split("?")[1] || "" //取到cid=6
    let params_src = params.split("=") //["cid","6"]
    if (params_src[0] === "cid") {
      this.cid = params_src[1]
    } else if (params_src[0] === "query") {
      this.query = params_src[1]
    }
    this.getProductList()
    //注册滚动监听事件
    // console.log(this.goodListRef);
    //current 会找到我们的节点   这里有个地方要注意就是要监听滚动事件的父元素
    this.goodListRef.current.parentElement.addEventListener("scroll",this.handleScroll)
  }
  //滚动事件
  handleScroll=() => {
    // console.log("列表开始滚动了");
    //获取要滚动的节点
    let parentElement = this.goodListRef.current.parentElement;
    //客户端的高度 clientHeight
    let clientHeight = parentElement.clientHeight
    // console.log("列表高度" , clientHeight);
    // 列表的高度
    let scrollHeight = parentElement.scrollHeight
    // console.log('列表可以滚动的距离', scrollHeight);
    // 滚动的距离
    let scrollTop = parentElement.scrollTop
    // console.log('列表滚动的距离' , scrollTop);？
    console.log(scrollHeight-clientHeight-scrollTop);
    if(scrollHeight-clientHeight-scrollTop<=1){
      console.log('触底了');
      this.getProductList()
    }
  }
    componentWillUnmount(){
    //卸载监听滚动事件
    this.goodListRef.current.parentElement.removeEventListener("scroll",
    this.handleScroll)
  }
  //获取商品列表
  getProductList = () => {
    //拼接的参数 params 
    let params = {};
    if (this.cid) {
      params["cid"] = this.cid
    }
    if (this.query) {
      //decodeURIComponent解码
      params["query"] = decodeURIComponent(this.query)
    }
    //传参  如果有页码存在
    if(this.total){
      params["pagenum"] = ++this.pagenum
    }else{
      params["pagenum"] = this.pagenum
    }

    //默认页码
    params["pageSize"] = this.pageSize
    if(this.pagenum > Math.ceil(this.total/this.pageSize)){
      Toast.success("最后一页了别翻了",1)
    }else{
      //请求数据
      myaxios.get("goods/search", {
        params: params,
      }).then(res => {
        console.log(res);
        this.total = res.total //这个类有多少产品
        this.pagenum = res.pagenum
        this.setState({
          goods:[...this.state.goods,...res.goods],//追加数据

        })
      }).catch(err => {
        console.log(err);
      })
    }
  }
  //点击图片进入详情页
  handleItemClick=(goods_id) => {
    this.props.history.push("/goodDetail/"+goods_id)
  }
  
  render() {
    return (
      <div className="yg-productList">
        {/* 商品列表导航条开始 */}
        <div className="yg-productList-nav">
          <NavBar
            className="productList-nav"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
          >
            商品列表
        </NavBar>
        </div>
        {/* 商品列表导航条结束 */}
        {/* 商品列表搜索框开始 */}
        <div className="yg-productList-search">
          <SearchInput></SearchInput>
        </div>
        {/* 商品列表搜索框结束 */}
        {/* tab栏开始 */}
        <div className="yg-gl-tab">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            tabBarUnderlineStyle={{ borderColor: "red" }}
            tabBarTextStyle={{ fontWeight: "200", color: "black" }}
          >

            <div className="gl-tab-zh"  ref={this.goodListRef}>
              {
                this.state.goods.map((v, index) => {
                  return (
                    <div className="tab-zh-item" key={v.goods_id} onClick={this.handleItemClick.bind(this, v.goods_id)}>
                      <div className="zh-item-left">
                        <img src={v.goods_small_logo ? v.goods_small_logo : emptyProduct} alt="" />
                      </div>
                      <div className="zh-item-rigth">
                        <div className="item-right-top">
                          {v.goods_name}
                        </div>
                        <div className="item-right-bottom">
                          ￥{v.goods_price}
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
              销量
        </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
              价格
        </div>
          </Tabs>
        </div>
        {/* tab栏结束 */}
      </div>
    )
  }
}
